<template>
	<view class="addSessionTime">
		<uni-forms  ref="addSessionTimeForm" :modelValue="fishTicketsAddData" :rules="addDataRules">
			<view class="leftBorder">{{fishTicketsAddData.fish_new_type==0?"定时鱼票":"循环鱼票"}}</view>
				<uni-forms-item name="fish_place_id" label="钓场名称:">
					 <uni-data-select
						v-model="fishTicketsAddData.fish_place_id"
						@change="changefishplace"
						:localdata="fishsiteList"
						placeholder="请选择钓场"
					  />
				</uni-forms-item>
				<uni-forms-item name="title" label="场次:">
					<uni-easyinput v-model="fishTicketsAddData.title" placeholder="钓场简称+场次名 ( 无需填日期 )" />
				</uni-forms-item>
				<uni-forms-item name="main_fish" label="垂钓鱼种:">
					<uni-data-select
						v-model="fishTicketsAddData.main_fish"
						:localdata="mainfishList"
						@change="changemainfish"
						placeholder="请选择垂钓鱼种"
					 />
				</uni-forms-item>
				<uni-forms-item name="play_method" label="玩法:">
					<uni-data-select
						v-model="fishTicketsAddData.play_method"
						:localdata="playmethodList"
						@change="changeplaymethod"
						placeholder="请选择玩法"
					 />
				</uni-forms-item>
				<uni-forms-item name="fish_number" label="撒鱼量:">
					<uni-easyinput v-model="fishTicketsAddData.fish_number" type="number" placeholder="输入斤数" />
					<text style="padding-left: 20rpx;font-size: 24rpx;">斤</text>
				</uni-forms-item>
			<view class="leftBorder">场次设置</view>
				<view v-if="fishTicketsAddData.fish_new_type == 0">
					<uni-forms-item name="data_list" label="开场日期:">
						<zxz-uni-data-select v-model="fishTicketsAddData.data_list" multiple dataKey="label" dataValue="value" :localdata="dataOptions"
						></zxz-uni-data-select>
					</uni-forms-item>
					<uni-forms-item  label="时间范围:">
						<picker class="picker-time" mode="time" @change="bindStartTimeChange">
							<view>{{fishTicketsAddData.start_time}}</view>
						</picker>
						&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
						<picker class="picker-time" mode="time" @change="bindEndTimeChange">
							<view>{{fishTicketsAddData.end_time}}</view>
						</picker>
					</uni-forms-item>
				</view>
				<view v-if="fishTicketsAddData.fish_new_type == 1">
					<uni-forms-item name="venue_start_date" label="起始时间:">
						<uni-datetime-picker type="datetime" :start="today" :hide-second="true" v-model="fishTicketsAddData.venue_start_date" placeholder="选择开始时间"/>
					</uni-forms-item>
					<uni-forms-item name="venue_end_date" label="结束时间:">
						<uni-datetime-picker type="datetime" :start="today" :hide-second="true" v-model="fishTicketsAddData.venue_end_date" placeholder="选择结束时间"/>
					</uni-forms-item>
					<uni-forms-item name="hours" label="循环时长:">
						<uni-easyinput  v-model="fishTicketsAddData.hours" type="number" placeholder="填写时长" />
						<text style="padding-left: 20rpx;font-size: 24rpx;">小时</text>
					</uni-forms-item>
				</view>
				<uni-forms-item class="maxlabel" name="limit_applicant_num" label="限制报名总人数:">
					 <uni-easyinput type="number" @change="onInput" v-model="fishTicketsAddData.limit_applicant_num" placeholder="输入人数" />
					 <text style="padding-left: 20rpx;font-size: 24rpx;">人</text>
				</uni-forms-item>
			<view class="leftBorder">费用设置</view>
				<uni-forms-item name="origin_price" label="鱼票价:">
					<uni-easyinput v-model="fishTicketsAddData.origin_price" type="number" @change="onInputorigin_price" placeholder="输入鱼票价格" />
					<text style="padding-left: 20rpx;font-size: 24rpx;">元</text>
				</uni-forms-item>
				<uni-forms-item  name="favour_price" label="特惠价:">
					<uni-easyinput v-model="fishTicketsAddData.favour_price" type="number" @change="onInputfavour_price" placeholder="输入鱼票特惠价格" />
					<text style="padding-left: 20rpx;font-size: 24rpx;">元</text>
				</uni-forms-item>
				<uni-forms-item name="favour_price" label="团购价:">
					<uni-data-select v-model="peopleNumber" :localdata="peopleNumberList" placeholder="团购人数"/>
					<uni-easyinput v-model="price" placeholder="团购价"  type="number"  @change="onInputprice"/>
					<uni-icons type="plus" size="16" @click="addGroupBuy()"></uni-icons>
				</uni-forms-item>
				<view class="groupBuyList">
					<view v-for="(item,i) in groupBuyList" :key="item.index">
						{{item.peopleNumber}}人团购价
						{{item.price}}元
						<uni-icons style="margin-left: 10rpx;" type="minus" color="#D43030" size="16" @click="delGroupBuy(item,i)"></uni-icons>
					</view>
				</view>
			<view class="leftBorder">退票退款设置<switch class="switch" :checked="fishTicketsAddData.is_return_and_refund" color="#D43030"  style="transform:scale(0.7)" @change="switch2Change"/></view>
				<view class="text">
					1、开场24小时前退预付数的95%，开场10小时前退预付款的70%，开场放号前退票，退还预付收的50%，开场放号后不予以退票，特殊情况请联系钓场。
					<br>
					2、占位卡退票规则：占位卡放号前可全额退款，占位卡放号后不支持退款。
				</view>
			<view class="leftBorder">是否发布活动<switch class="switch" :checked="fishTicketsAddData.is_activity" color="#D43030"  style="transform:scale(0.7)" @change="switch3Change"/></view>
				<uni-easyinput v-show="fishTicketsAddData.is_activity" type="textarea" v-model="fishTicketsAddData.activity_content" placeholder="请输入活动内容" />
			<view class="leftBorder">鱼汛规则</view>
			<uni-easyinput type="textarea" v-model="fishTicketsAddData.content" placeholder="请输入钓场规则" />
			<button class="save" style="margin: 30rpx auto;" @click="submit('addSessionTimeForm')">下一步</button>
		</uni-forms >
	</view>
	
</template>

<script>
	import { get_fish_place } from '@/utils/api.js'
	import {get_fish_new_id, get_main_fish, get_play_method } from '@/utils/fishNew/index.js'
	export default {
		data() {
			return {
				today: null,
				dataOptions:[],
				groupBuyList:[],
				peopleNumberList: [
					{ value: 2, text: "二人团", disable:false },
					{ value: 3, text: "三人团", disable:false },
					{ value: 4, text: "四人团", disable:false },
					{ value: 5, text: "五人团", disable:false },
					{ value: 6, text: "六人团", disable:false },
					{ value: 7, text: "七人团", disable:false },
					{ value: 8, text: "八人团", disable:false },
					{ value: 9, text: "九人团", disable:false },
					{ value: 10, text: "十人团", disable:false }
				],
				peopleNumber: null,
				price: '',
				fishsiteList: [],
				mainfishList: [],
				playmethodList: [],
				fishTicketsAddData: {
					data_list: [],
					fish_new_type: null,
					fish_place_id: null,
					title: '',
					fish_place_name: '',
					main_fish: null,
					main_fish_name: '',
					play_method: null,
					play_method_name: '',
					fish_number: '',
					end_time: '结束时间',
					start_time: '开始时间',
					venue_end_date: null,
					venue_start_date: null,
					hours: '',
					origin_price: '',
					favour_price: '',
					is_return_and_refund: false,
					is_activity: false,
					content: null,
					activity_content: null,
					limit_applicant_num: '',
					groupBuyList: []
				},
				addDataRules:{
					fish_place_id: {
						rules: [{
							required: true,
							errorMessage: '请选择钓场'
						}]
					},
					title: {
						rules: [{
							required: true,
							errorMessage: '请填写场次'
						}]
					},
					play_method: {
						rules: [{
							required: true,
							errorMessage: '请选择玩法'
						}]
					},
					main_fish: {
						rules: [{
							required: true,
							errorMessage: '请选择鱼种'
						}]
					},
					fish_number: {
						rules: [{
							required: true,
							errorMessage: '请填写撒鱼量'
						}]
					},
					origin_price: {
						rules: [{
							required: true,
							errorMessage: '请填写鱼票原价'
						}]
					},
					favour_price: {
						rules: [{
							required: true,
							errorMessage: '请填写特惠价'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '请填写鱼汛规则'
						}]
					},
				}
			}
		},
		onLoad(query) {
			this.init()
			this.fishTicketsAddData.fish_new_type = query.type*1
			if(query.type*1 == 1){
				this.fishTicketsAddData.start_time = null
				this.fishTicketsAddData.end_time = null
			}else{
				this.fishTicketsAddData.hours = null
			}
			if(query.id){
				console.log('query', query.id)
				this.getNew(query.id)
			}
		},
		methods: {
			onInput(event) {
			  if (!this.isPositiveInteger(event)) {
				uni.showToast({
				  title: '请输入正整数!',
				  icon: 'none'
				});
				this.fishTicketsAddData.limit_applicant_num = '';
			  } 
			},
			onInputorigin_price(event) {
			  if (!this.isPositiveInteger(event)) {
				uni.showToast({
				  title: '请输入正整数!',
				  icon: 'none'
				});
				this.fishTicketsAddData.origin_price = '';
			  } 
			},
			onInputfavour_price(event) {
			  if (!this.isPositiveInteger(event)) {
				uni.showToast({
				  title: '请输入正整数!',
				  icon: 'none'
				});
				this.fishTicketsAddData.favour_price = '';
			  } 
			},
			onInputprice(event) {
			  if (!this.isPositiveInteger(event)) {
				uni.showToast({
				  title: '请输入正整数!',
				  icon: 'none'
				});
				this.price = '';
			  } 
			},
			isPositiveInteger(value) {
			  return /^[1-9]\d*$/.test(value);
			},
			getNew(id) {
				get_fish_new_id(id).then(res=>{
					this.fishTicketsAddData.fish_place_id = res.data.fish_place_id
					this.fishTicketsAddData.title = res.data.title
					this.fishTicketsAddData.fish_place_name = res.data.fish_place_name
					this.fishTicketsAddData.groupBuyList = res.data.groupBuyList
					this.fishTicketsAddData.main_fish = res.data.main_fish*1
					this.fishTicketsAddData.main_fish_name = res.data.main_fish_name
					this.fishTicketsAddData.play_method = res.data.play_method*1
					this.fishTicketsAddData.play_method_name = res.data.play_method_name
					this.fishTicketsAddData.fish_number = res.data.fish_number
					this.fishTicketsAddData.origin_price = res.data.origin_price
					this.fishTicketsAddData.favour_price = res.data.favour_price
					this.fishTicketsAddData.is_return_and_refund = res.data.is_return_and_refund
					this.fishTicketsAddData.is_activity = res.data.is_activity
					this.fishTicketsAddData.content = res.data.content
					this.fishTicketsAddData.activity_content = res.data.activity_content
					this.fishTicketsAddData.limit_applicant_num = res.data.limit_applicant_num
					this.fishTicketsAddData.groupBuyList = res.data.groupBuyList
					this.fishTicketsAddData.hours = res.data.hours
					this.fishTicketsAddData.venue_end_date = res.data.venue_end_date
					this.fishTicketsAddData.venue_start_date = res.data.venue_start_date
					
					this.groupBuyList = res.data.groupBuyList
					res.data.groupBuyList.forEach(item=>{
						this.peopleNumberList[item.peopleNumber-2].disable = true
					})
					
				})
			},
			back() {
				 uni.navigateBack({
					 delta:1
				 })
			},
			init(){
				var today = new Date();
				var dates = [];
				for (var i = 0; i<7; i++) {
				  // 计算日期差值，向前推算日期
				    var diff = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
				  // 将日期加入数组
				  dates.push({
					  label: `${diff.getFullYear()}-${diff.getMonth()+1}-${diff.getDate()}`,
					  value: `${diff.getFullYear()}-${diff.getMonth()+1}-${diff.getDate()}`,
				  });
				}
				this.today = dates[0].value
				// 输出最近7天的日期
				this.dataOptions = dates
				get_fish_place().then(res=>{
					if(res.code==200){
						var list = []
						res.data.forEach(item=>{
							list.push({text: item.fish_place_name,value:item.id});
						})
						this.fishsiteList = list
					}
				})
				get_main_fish().then(res=>{
					this.mainfishList = res.data
				})
				get_play_method().then(res=>{
					this.playmethodList = res.data
				})
			},
	
			// 添加团购价
			addGroupBuy(){
				this.groupBuyList.push({
					peopleNumber: this.peopleNumber,
					price: this.price
				})
				this.peopleNumberList[this.peopleNumber-2].disable = true
				this.peopleNumber = null
				this.price = null
			},
			// 删除团购价
			delGroupBuy(item,i){
				this.groupBuyList.splice(i, 1);
				this.peopleNumberList[item.peopleNumber-2].disable = false
			},
			switch2Change(e) {
				this.fishTicketsAddData.is_return_and_refund = e.detail.value
			},
			switch3Change(e) {
				this.fishTicketsAddData.is_activity = e.detail.value
			},
			changefishplace(e){
				var fish_place = this.fishsiteList.filter(item=>{
					if(item.value ==e){
						return item
					}
				})
				this.fishTicketsAddData.fish_place_name = fish_place[0].text
			},
			changemainfish(e){
				var mainfish = this.mainfishList.filter(item=>{
					if(item.value ==e){
						return item
					}
				})
				this.fishTicketsAddData.main_fish_name = mainfish[0].text
			},
			changeplaymethod(e){
				var playmethod = this.playmethodList.filter(item=>{
					if(item.value ==e){
						return item
					}
				})
				this.fishTicketsAddData.play_method_name = playmethod[0].text
			},
			bindStartTimeChange(e) {
				this.fishTicketsAddData.start_time = e.detail.value
			},
			bindEndTimeChange(e) {
				this.fishTicketsAddData.end_time = e.detail.value
			},
			submit(ref){
				console.log(this.fishTicketsAddData)
				let that = this
				this.$refs[ref].validate().then(res => {
					this.fishTicketsAddData.groupBuyList = this.groupBuyList
					// let json =  JSON.stringify(this.fishTicketsAddData)
					uni.navigateTo({url:`/pages/fishTickets/addSession/check`,
						success:function(res){
							console.log(that.fishTicketsAddData)
							res.eventChannel.emit('setObj',{data:that.fishTicketsAddData})
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.addSessionTime {
		padding: 20rpx 40rpx;
		.leftBorder{
			border-left: 8rpx solid #D43030;
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 700;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			position: relative;
			.switch{
				position: absolute;
				right: 0;
				top: -10rpx;
			}
		}
		
		.text{
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.8);
		}

		.maxlabel{
			:deep(.uni-forms-item__label){
				width: 240rpx !important;
			}
		}
		.fulllabel{
			:deep(.uni-forms-item__label){
				width: calc(100% - 40rpx) !important;
				position: relative;
				.uni-icons{
					position: absolute;
					right: 0;
				}
			}
		}
		.popup{
			.popup_header{
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				font-weight: 600;
				border-bottom: 1px solid #E5E5E5;
				position: relative;
				.close{
					position: absolute;
					right: 20rpx;
					top: 0rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #D43030;
				}
			}
			.popup_content{
				padding: 20rpx;

			}
		}
		:deep(.checkbox__inner){
			display: none;
		}
		:deep(.checklist-text){
			border: 1px solid #e6e6e6;
			border-radius: 10rpx;
			padding: 16rpx 20rpx;
			font-size: 24rpx !important;
		}
		:deep(.uni-data-checklist){
			.checklist-group .checklist-box.is--default.is-checked .checklist-text{
				color: #D43030;
				background: rgba(212, 48, 48, 0.3);
				border: rgba(212, 48, 48, 1);
			}
		} 
		.chooseArea{
			color: #2A82E4;
			font-size: 26rpx;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}
		.groupBuyList{
			font-size: 28rpx;
			line-height: 40rpx;
			padding-left: 180rpx;
			view{
				display: flex;
				align-items: center;
			}
		}
		:deep(.uni-forms-item){
			.uni-forms-item__content{
				display: flex;
				align-items: center;
			}
		}
		:deep(uni-button.save){
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 30rpx;
			background: #D43030 !important;
			width: 400rpx !important;
			color: #fff;
			font-size: 24rpx;
		}
		.picker-time{
			border: 1px solid #f0f0f0;
			padding: 12rpx 40rpx;
			font-size: 12px;
			color: #999;
		}
	}
</style>
